
<template>
  <div class="Logistics">
    <!------------------------------------------------------返回导航------------------------------------------------------------------>
    <HeaderTitle :title="WebName"></HeaderTitle>
    <van-pull-refresh v-model="MianLoading" @refresh="onRefresh">
      <van-panel title="顺丰快递" desc="运单号 111223333444"></van-panel>
      <!-- 物流详情状态 -->
      <div class="LogisticsBody">
        <div class="container">
          <van-steps direction="vertical" :active="0" active-color="#D7B782">
            <van-step v-for="(item,index) in LogisticsData" :key="index">
              <p class="text">{{item.text}}</p>
              <p class="time">{{item.time}}</p>
            </van-step>
          </van-steps>
        </div>
      </div>
    </van-pull-refresh>
  </div>
</template>
<script>
/* ... */
import HeaderTitle from '@/components/HeaderTitle.vue'
import { getOrderDetail } from '@/api/api'
export default {
  name: 'real',

  mixins: [],

  components: {
    HeaderTitle
  },

  props: {},

  data () {
    return {
      WebName: '物流信息',
      MianLoading: false,
      count: 0,
      orderId: this.$route.query.order,
      LogisticsData: [
        {
          text: '【图图市】快件离开图图市中转部已发往包图',
          time: '2016-07-10 09:30'
        },
        { text: '【图图市】快件已到达图图市中转部', time: '2016-07-10 09:30' },
        {
          text: '【包包市】快件离开包包市中转部已发往图图市中转部',
          time: '2016-07-10 09:30'
        },
        { text: '【包包市】快件已到达包包市中转部', time: '2016-07-10 09:30' },
        {
          text: '【包子市】快件离开包子市已发往包包市中转部',
          time: '2016-07-10 09:30'
        },
        { text: ' 包子市】包子市的佰斯特', time: '2016-07-10 09:30' }
      ]
    }
  },

  computed: {},

  watch: {},

  created () {
    if (localStorage.getItem('X-Auth-Token')) {
      var data = { orderId: this.orderId }
      this.getJsonData(data)
    } else {
      this.$toast.fail('您未曾登陆')
      this.$router.push('./login?tabs=0')
    }
  },

  mounted () {},

  destroyed () {},

  methods: {
    // 列表数据请求
    getJsonData (data) {
      getOrderDetail(this.$qs.stringify(data))
        .then(res => {
          this.post = res.data.data.post
          this.address = res.data.data.address
          this.commodity = res.data.data.commodity
          this.order = res.data.data.order
          console.log(res.data.data)
          if (res.data.code === 200) {
          } else if (res.data.code === 500) {
            this.$toast(res.data.message)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 下拉刷新事件
    onRefresh () {
      setTimeout(() => {
        this.$toast('刷新成功')
        this.MianLoading = false
        this.count++
      }, 500)
    }
  }
}
</script>

<style lang="less" >
/* ... */

.container {
  margin: 0 15px;
}
.Logistics {
  height: 100%;
  background-color: #f6f6f6;
  .van-pull-refresh {
    height: calc(100% - 50px);
    overflow-y: auto;
    .LogisticsBody {
      background-color: #ffffff;
      margin-top: 10px;
      .van-steps {
        .van-steps__items {
          .van-step__title {
            p {
              margin: 0;
            }
            .text {
              font-size: 12px;
            }
            .time {
              font-size: 12px;
              color: #868686;
            }
          }
        }
      }
    }
  }
}
</style>
